<template>
  <div class="box homeBox" >
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @click="$router.push('/search/' +value)"
      disabled
      class="vanSearch"
    >
      <template #action>
        <div @click="onSearch"> 书城</div>
      </template>
    </van-search>
    <div class="noticeBar" @scroll='onScroll' ref="ma">
      <van-notice-bar
        left-icon="volume-o"
        mode="closeable"
        text="高尔基说，书籍是人类进步的阶梯;莎士比亚说，书籍是人类知识的总统;列夫·托尔斯泰说，理想的书籍是智慧的钥匙。当我们第一遍读一本好书的时候，我们仿佛觉得找到了一个朋友;当我们再一次读这本好书的时候，仿佛又和老朋友重逢。好书尽在黄金屋！"
      />
      <div class="kindCont" >
        <dl>
          <dt class="iconfont icon-fenlei2" @click="$router.push('/kind')"></dt>
          <dd>分类</dd>
        </dl>
          <dl>
          <dt class="iconfont icon-xuanhuan" style="color:orange"></dt>
          <dd>玄幻</dd>
        </dl>
          <dl>
          <dt class="iconfont icon-xianxia" style="color:pink"></dt>
          <dd>仙侠</dd>
        </dl>
          <dl>
          <dt class="iconfont icon-yanqing" style="color:purper"></dt>
          <dd>言情</dd>
        </dl>
      </div>
      <van-tabs v-model="active"  scrollspy sticky class='main'>
        <van-tab title="每日精选" class="bookDay">
          <h3>今日必读</h3>
          <div>
            <dl v-for="item in proList" :key="item.bookId" @click="$router.push('/detail/' + item.bookId)">
              <dt>
                <van-image
                  width="80"
                  height="100"
                  :src="item.img"
                />
              </dt>
              <dd>
                <h3>{{item.bookName}}</h3>
                <p>{{item.introduction}}</p>
                <van-row gutter="20">
                  <van-col span="8">{{item.author}}</van-col>
                  <van-col span="4" offset="0">{{item.chapter}}</van-col>
                  <van-col span="6" offset="4">{{item.kind}}</van-col>
                </van-row>
              </dd>
            </dl>
          </div>
        </van-tab>
        <van-tab title="经典推荐">
          <div class="swipe">
            <div class='swipeBook'>
              <h2>经典名著</h2>
              <ul>
                <li><a href="">三国演义 - 罗贯中</a></li>
                <li><a href="">水浒传 - 施耐庵</a></li>
                <li><a href="">西游记 - 吴承恩</a></li>
                <li><a href="">红楼梦 - 曹雪芹</a></li>
              </ul>
            </div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <van-image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1108849660,2240042442&fm=26&gp=0.jpg"></van-image>
              </van-swipe-item>
              <van-swipe-item>
                <van-image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=310025682,4108694321&fm=26&gp=0.jpg"></van-image>
              </van-swipe-item>
              <van-swipe-item>
                <van-image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=627526990,658338314&fm=26&gp=0.jpg"></van-image>
              </van-swipe-item>
              <van-swipe-item>
                <van-image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg-search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi3%2F2396691598%2FTB1zW1hcLQs8KJjSZFEXXc9RpXa_%21%210-item_pic.jpg_300x300.jpg&refer=http%3A%2F%2Fg-search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618479719&t=b88160da3ceab631e715763288c21804"></van-image>
              </van-swipe-item>
            </van-swipe>
          </div>
        </van-tab>
        <van-tab title="新书上架" class="newBook">
          <h3>新书必看</h3>
          <div class="newBookDiv">
            <dl v-for="item in newList" :key="item.author">
              <dt>
                <van-image
                    :src="item.img"
                  />
              </dt>
              <dd>
                <h4>{{item.name}}</h4>
                <p>{{item.author}}</p>
              </dd>
            </dl>
          </div>

        </van-tab>
        <van-tab title="免费好书" class="freeBook">
          <div class="bookTime">
            <h3>限时免费</h3>
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
          <div class="bookFree">
              <dl v-for="item in bookList" :key="item.bookId" @click="$router.push('/detail/' + item.bookId)">
              <dt>
                <van-image
                  width="80"
                  height="100"
                  :src="item.img"
                />
              </dt>
              <dd>
                <h3>{{item.bookName}}</h3>
                <p>{{item.introduction}}</p>
                <van-row gutter="20">
                  <van-col span="8">{{item.author}}</van-col>
                  <van-col span="7" offset="0">{{item.chapter + "万字"}}</van-col>
                  <van-col span="4" offset="2">{{item.kind}}</van-col>
                </van-row>
              </dd>
            </dl>
            </div>
        </van-tab>
        <!-- <van-tab title="热门榜单">内容 5</van-tab> -->
      </van-tabs>
    </div>
    <van-icon name="back-top" class="my-back-top" ref='toTop' @click='goToTop'/>
  </div>
</template>

<script>
import { getData, getPage } from '@/api/request.js'
import Vue from 'vue'
import { Search, Tab, Tabs, Grid, GridItem, Icon, Image as VanImage, Swipe, SwipeItem, NoticeBar, Card, Col, Row, CountDown } from 'vant'

Vue.use(Search)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(NoticeBar)
Vue.use(Card)
Vue.use(Col)
Vue.use(Row)
Vue.use(CountDown)

export default {

  data () {
    return {
      value: '三国演义',
      active: 0,
      time: 30 * 60 * 60 * 1000,
      proList: [],
      bookList: [],
      newList: [
        {
          name: '史记',
          author: '司马迁',
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051816181,4099402795&fm=26&gp=0.jpg'
        },
        {
          name: '论语',
          author: '孔子',
          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1724652252,42739752&fm=26&gp=0.jpg'
        },
        {
          name: '活着',
          author: '余华',
          img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3523960169,1160284392&fm=26&gp=0.jpg'
        },
        {
          name: '狂人日记',
          author: '鲁迅',
          img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2869317490,1679669482&fm=15&gp=0.jpg'
        },
        {
          name: '史记',
          author: '司马迁1',
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051816181,4099402795&fm=26&gp=0.jpg'
        },
        {
          name: '论语',
          author: '孔子1',
          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1724652252,42739752&fm=26&gp=0.jpg'
        },
        {
          name: '活着',
          author: '余华1',
          img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3523960169,1160284392&fm=26&gp=0.jpg'
        },
        {
          name: '狂人日记',
          author: '鲁迅1',
          img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2869317490,1679669482&fm=15&gp=0.jpg'
        }
      ]
    }
  },
  methods: {
    onSearch () {},
    onScroll () {
      // 滚动条事件,配合回到顶部使用
      // console.log(this.$refs.ma.scrollTop)
      if (this.$refs.ma.scrollTop > 1130) {
        this.$refs.toTop.style.display = 'block'
      } else {
        this.$refs.toTop.style.display = 'none'
      }
    },
    goToTop () {
      this.$refs.ma.scrollTop = 0
    }
  },
  mounted () {
    getData().then(data => {
      this.bookList = data.data.msg
      console.log(this.bookList)
    }).catch(err => {
      console.log(err)
    })
    getPage({
      num: 4,
      index: 7
    }).then(data => {
      this.proList = data.data.msg
      console.log(this.proList)
    })
  }
}
</script>

<style lang='scss'>
.homeBox{
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  .vanSearch{
    position:fixed;
    top:0;
    width:100vw;
    background:rgb(241, 241, 231);
  }
  .noticeBar{
    flex:1;
    overflow: auto;
    margin-top: 0.54rem;
    .van-tab--active{
      font-size: 0.2rem;
      font-weight: bold;
      color:#000000;
    }
  }
    .kindCont{
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 1rem;
      dl{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        dt{
          font-size: 0.35rem;
          margin-bottom: 0.1rem;
          color:rgb(62, 194, 218);
        }
        dd{
          font-size: 0.15rem;
        }
      }
    }
  .main{
    .bookDay{
      margin: 0.1rem 0;
      h3{
        font-size: 0.15rem;
        margin: 0.1rem 0;
      }
      dl{
        display:flex;
        justify-content: space-between;
        height: 1rem;
        background: #efefef;
        margin-bottom:0.1rem;
        dd{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width:70vw;
          font-size: 0.13rem;
          p{
            overflow: auto;
            margin-bottom: 0.1rem;
          }
          .van-row{
            text-align:center ;
          }
        }
      }
    }
    .newBook{
      margin: 0.1rem 0;
      .newBookDiv{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        dl{
          height: 1.5rem;
          margin-top: 0.1rem;
          h4{
            font-size:0.17rem;
            margin-left: 0.1rem;
          }
          p{
            font-size:0.15rem;
            margin-left: 0.1rem;
          }
        }
        .van-image{
          height: 1rem;
          width:20vw;
        }
      }
    }
    .swipe{
      display: flex;
      justify-content: space-around;
      margin-top: 0.2rem;
      .swipeBook{
        h2{
          height: 0.2rem;
          color:crimson;
          margin-bottom: 0.3rem;
        }
        li{
          height: 0.2rem;
          margin: 0.15rem 0;
        }
      }
      .my-swipe{
        // background: aqua;
        font-size: 20px;
        width: 50vw;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        .van-image{
          width: 2rem;
          height: 2rem;
        }
      }
    }
    .freeBook{
      margin: 0.1rem;
      // width:100vw;
      .bookTime{
        display: flex;
        justify-content: space-between;
        margin:0.1rem 0.1rem 0.1rem 0;
        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #ee0a24;
        }
        .block {
          display: inline-block;
          width: 22px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #ee0a24;
        }
      }
    }
    .bookFree{
      margin: 0.1rem 0;
      h3{
        font-size: 0.15rem;
        margin: 0.1rem 0;
      }
      dl{
        display:flex;
        justify-content: space-between;
        height: 1rem;
        background: #efefef;
        margin-bottom:0.1rem;
        dd{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width:70vw;
          font-size: 0.13rem;
          p{
            overflow: auto;
            margin-bottom: 0.1rem;
          }
          .van-row{
            text-align:center ;
          }
        }
      }
    }
  }
  .my-back-top{
  color: rgb(34, 58, 196);
  background-color: #efefef;
  font-size: 0.3rem;
  position: fixed;
  right: 0.1rem;bottom:0.8rem;
  display: none;
}
}
</style>
